<template>
	<div class="theme-setting">
		<el-button :icon="icon" circle @click="update_theme" />
	</div>
</template>
<script lang="ts" setup>
import { isDark, toggleDark } from '@/composables';
import { Sunny, Moon } from '@element-plus/icons-vue';
import { shallowRef } from 'vue';
import { ElNotification } from 'element-plus';
const icon = shallowRef(Sunny);
const update_theme = () => {
	toggleDark();
	if (isDark.value) {
		ElNotification({
			message: '夜间模式',
			type: 'success',
			position: 'bottom-right',
		});
		icon.value = Moon;
	} else {
		ElNotification({
			message: '白天模式',
			type: 'success',
			position: 'bottom-right',
		});
		icon.value = Sunny;
	}
};
</script>

<style lang="less" scoped>
.theme-setting {
	position: fixed;
	right: 38px;
	top: 38px;
	z-index: 1000;
}
</style>
